<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { storeToRefs } from "pinia";
import { addSkuAPI } from "@/api/product/spuApi/spu.ts";
import useSpuStore from "@/pinia/modules/product/spuStore/spuStore.ts";
import useAttributeStore from "@/pinia/modules/product/attributeStore/attributeStore/attributeStore.ts";
import { sku, spuImage } from "@/api/product/spuApi/interface.ts";
import { ElMessage } from "element-plus";

const tableRef = ref();
const spuStore = useSpuStore();
const attributeStore = useAttributeStore();

const { spuImageList, spuSaleAttributeList, currentSpu } = storeToRefs(spuStore);
const { attributeList } = storeToRefs(attributeStore);

const skuInfo = reactive<sku>({
  category3Id: "",
  spuId: "",
  tmId: "",
  skuName: "",
  price: "",
  weight: "",
  skuDesc: "",
  skuAttrValueList: [{ attrId: "", valueId: "" }],
  skuSaleAttrValueList: [{ saleAttrId: "", saleAttrValueId: "" }],
  skuDefaultImg: "",
});

/*设置默认图片按钮的回调函数 */
const handle = (image: spuImage) => {
  skuInfo.skuDefaultImg = image.imgUrl;
  spuImageList.value.forEach(item => {
    tableRef.value.toggleRowSelection(item, false);
  });
  tableRef.value.toggleRowSelection(image, true);
};

/* 点击取消按钮的回调函数 */
const handleCancel = () => {
  spuStore.changeScreen(0);
};


/* 点击保存按钮的回调函数 */
const handleSubmit = async () => {
  const attributeValueList = attributeList.value.map(item => {
    const [attrId, valueId] = item.attrIdAndValueId.split(":");
    return { attrId, valueId };
  });
  const saleAttrValueList = spuSaleAttributeList.value.map(item => {
    const [saleAttrId, saleAttrValueId] = item.saleAttrIdAndValueId.split(":");
    return { saleAttrId, saleAttrValueId };
  });
  skuInfo.skuAttrValueList = attributeValueList;
  skuInfo.skuSaleAttrValueList = saleAttrValueList;

  try {
    await addSkuAPI(skuInfo);
    spuStore.changeScreen(0);
    ElMessage.success("添加sku成功");
  } catch (error: any) {
    ElMessage.error(error.message);
  }
};


onMounted(() => {
  skuInfo.category3Id = currentSpu.value?.category3Id;
  skuInfo.spuId = currentSpu.value?.id;
  skuInfo.tmId = currentSpu.value?.tmId;
});
</script>

<template>
  <el-form label-width="80px">
    <el-form-item label="SKU名称">
      <el-input placeholder="请输入SKU名称" v-model="skuInfo.skuName"></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input placeholder="请输入价格(元)" v-model="skuInfo.price"></el-input>
    </el-form-item>
    <el-form-item label="重量(克)">
      <el-input placeholder="请输入重量(克)" v-model="skuInfo.weight"></el-input>
    </el-form-item>
    <el-form-item label="SKU描述">
      <el-input placeholder="请输入SKU描述" v-model="skuInfo.skuDesc"></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form inline>
        <el-form-item v-for="(attribute) in attributeList" :label="attribute.attrName" :key="attribute.id">
          <el-select v-model="attribute.attrIdAndValueId" placeholder="请选择平台属性">
            <el-option v-for="(attributeValue) in attribute.attrValueList" :value="`${attribute.id}:${attributeValue.id}`" :label="attributeValue.valueName" :key="attributeValue.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form inline>
        <el-form-item v-for="(saleAttribute) in spuSaleAttributeList" :label="saleAttribute.saleAttrName" :key="saleAttribute.id">
          <el-select v-model="saleAttribute.saleAttrIdAndValueId" placeholder="请选择销售属性">
            <el-option v-for="(saleAttributeValue) in saleAttribute.spuSaleAttrValueList" :value="`${saleAttribute.id}:${saleAttributeValue.id}`" :label="saleAttributeValue.saleAttrValueName" :key="saleAttributeValue.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片名称">
      <el-table border stripe :data="spuImageList" ref="tableRef">
        <el-table-column type="selection" align="center" width="100"></el-table-column>
        <el-table-column label="图片" align="center">
          <template #default="{row}">
            <img :src="row.imgUrl" alt="">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button type="primary" @click="handle(row)">设置为默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button type="danger" @click="handleCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.el-table {
  img {
    width: 50px;
  }
}
</style>
